import { Input } from "antd"
import { forwardRef, Ref, useImperativeHandle, useState } from "react"

import { SFormItem } from "@/components/common"
// import { Select } from "antd"
import ComplexInput from "@/components/common/complexInput"
import { useLocale } from "@/locales"
// import dynamicComponent from "./dynamicImport"

const Demo = (_props: any, ref: Ref<unknown> | undefined) => {
	const { newFormat } = useLocale()
	const options = [
		{ label: newFormat({ id: "label.agent.parentName" }), value: "parentProxyName" },
		{ label: newFormat({ id: "label.agent.belongName" }), value: "belongProxyName" }
	]
	const [field, setField] = useState("parentProxyName")
	const defaultNormalize = (value: string) => value.replaceAll(" ", "") || undefined
	useImperativeHandle(ref, () => {
		return {
			setField
		}
	})
	return (
		<ComplexInput options={options} value={field} onTypeChange={setField}>
			<SFormItem name={field} normalize={defaultNormalize}>
				<Input allowClear placeholder={newFormat({ id: _props.placeholder ? _props.placeholder : "label.please_input" })} />
			</SFormItem>
		</ComplexInput>
	)
}

export default forwardRef(Demo)
